<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="static/images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="static/images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
    <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/bootstrap-admin.min.css">
    <title>bootstrap-admin</title>
</head>
<body>


<!--侧边栏-->
<div class="bsa-sidebar">
    <div class="bsa-sidebar-header">
        <img src="static/images/logo-icon.png" class="bsa-logo-icon" alt="logo-icon">
        <div class="bsa-logo-text">bootstrap-admin</div>
    </div>
    <div class="bsa-sidebar-body">
        <ul class="bsa-menu">
            <li>
                <a href="index.html" class="active">
                    <i class="bi bi-house"></i>首页
                </a>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-columns-gap"></i>UI组件
                </a>
                <ul>
                    <li>
                        <a href="component-card.html">卡片</a>
                    </li>
                    <li>
                        <a href="component-button.html">按钮</a>
                    </li>
                    <li>
                        <a href="component-accordion.html">手风琴</a>
                    </li>
                    <li>
                        <a href="component-alert.html">警告框</a>
                    </li>
                    <li>
                        <a href="component-badge.html">徽章</a>
                    </li>
                    <li>
                        <a href="component-breadcrumb.html">面包屑</a>
                    </li>
                    <li>
                        <a href="component-table.html">表格</a>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">表单</a>
                        <ul>
                            <li><a href="component-form-elements.html">基础元素</a></li>
                            <li><a href="component-form-validations.html">表单验证</a></li>
                            <li><a href="component-form-layouts.html">表单布局</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-html"></i>页面
                </a>
                <ul>
                    <li>
                        <a href="page-profile.html">个人资料</a>
                    </li>
                    <li>
                        <a href="page-timeline.html">时间轴</a>
                    </li>
                    <li>
                        <a href="page-error.html">错误页面</a>
                    </li>
                    <li>
                        <a href="page-add.html">新增页面</a>
                    </li>
                    <li>
                        <a href="page-list.html">列表页</a>
                    </li>
                    <li>
                        <a href="page-blank.html">新页面</a>
                    </li>
                    <li>
                        <a href="page-login.html">登录页</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-js"></i>插件
                </a>
                <ul>
                    <li><a href="plugin-bootstrap-notify.html">通知插件</a></li>
                    <li><a href="plugin-bootstrap-dialog.html">弹层插件</a></li>
                    <li><a href="plugin-formvalidation.html">表单验证</a></li>
                    <li><a href="plugin-tempus-dominus.html">日期时间选择</a></li>
                    <li><a href="plugin-tinymce.html">富文本编辑器</a></li>
                    <li><a href="plugin-dropzone.html">文件上传</a></li>
                    <li><a href="plugin-croppie.html">头像裁剪</a></li>
                    <li><a href="plugin-ztree.html">树形组件</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-list-nested"></i>多级菜单
                </a>
                <ul>
                    <li><a href="javascript:">一级菜单</a></li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                            <li>
                                <a href="javascript:" class="has-children">二级菜单</a>
                                <ul>
                                    <li><a href="javascript:">三级菜单</a></li>
                                    <li>
                                        <a href="javascript:" class="has-children">三级菜单</a>
                                        <ul>
                                            <li><a href="javascript:">四级菜单</a></li>
                                            <li><a href="javascript:">四级菜单</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--头部导航-->
<div class="bsa-header">
    <div class="bsa-header-item bsa-mobile-sidebar-item">
        <i class="bi bi-list"></i>
    </div>
    <div class="bsa-header-item bsa-search-bar-item">
        <form class="bsa-search-box" action="#">
            <input type="text" class="form-control bsa-search-input" name="keyword" aria-label="搜索关键词"
                   placeholder="搜索关键词">
            <button class="bsa-search-btn" type="submit"><i class="bi bi-search"></i></button>
            <i class="bi bi-x bsa-search-close-icon"></i>
        </form>
    </div>
    <div class="bsa-header-item bsa-mobile-search-item">
        <i class="bi bi-search"></i>
    </div>
    <div class="bsa-header-item dropdown">
        <i class="bi bi-grid" data-bs-toggle="dropdown" role="button"></i>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">
            <div class="bsa-dropdown-menu-body">
                <div class="container-fluid">
                    <div class="row row-cols-3 g-3 p-3">
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-primary text-white"><i class="bi bi-bank"></i></div>
                            <div class="fs-6 mt-1 text-muted">银行</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-info text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用2</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用3</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用4</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用5</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用6</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="position-relative " data-bs-toggle="dropdown" role="button">
            <span class="bsa-num-count">99+</span>
            <i class="bi bi-bell"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">

            <div class="bsa-dropdown-menu-header d-flex align-items-center justify-content-between">
                <p class="bsa-dropdown-menu-title">通知列表</p>
                <a href="javascript:" class="bsa-dropdown-menu-all-read">全部设为已读</a>
            </div>

            <div class="bsa-dropdown-menu-body">
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-danger text-white"><i class="bi bi-cart"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新订单</h5>
                            <p class="bsa-media-text">您收到新的订单</p>
                            <p class="bsa-media-time small">10秒前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-success text-white"><i class="bi bi-people"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新增用户</h5>
                            <p class="bsa-media-text">100个新用户注册</p>
                            <p class="bsa-media-time small">30分钟前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-warning text-white"><i class="bi bi-chat-square-dots"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新的评论</h5>
                            <p class="bsa-media-text">您收到客户新的评论</p>
                            <p class="bsa-media-time small">2天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-primary text-white"><i class="bi bi-cart-check"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">订单已经发货</h5>
                            <p class="bsa-media-text">您的商品已在运送途中</p>
                            <p class="bsa-media-time small">3天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-secondary text-white"><i class="bi bi-person-workspace"></i>
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新的同事</h5>
                            <p class="bsa-media-text">新增3位后台管理工作成员</p>
                            <p class="bsa-media-time small">1周前</p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="bsa-dropdown-menu-footer d-flex align-items-center justify-content-center">
                <a href="javascript:" class="bsa-dropdown-view-all">查看所有通知</a>
            </div>

        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="position-relative " data-bs-toggle="dropdown" role="button">
            <span class="bsa-num-count">9</span>
            <i class="bi bi-chat-left"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">
            <div class="bsa-dropdown-menu-header d-flex align-items-center justify-content-between">
                <p class="bsa-dropdown-menu-title">消息列表</p>
                <a href="javascript:" class="bsa-dropdown-menu-all-read">全部设为已读</a>
            </div>
            <div class="bsa-dropdown-menu-body">
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11110-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">青蛙王子</h5>
                            <p class="bsa-media-text">请给我开通新的角色权限~</p>
                            <p class="bsa-media-time small">16秒前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11131.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">骑着蜗牛看世界</h5>
                            <p class="bsa-media-text">兄弟，晚上一起去喝几杯</p>
                            <p class="bsa-media-time small">40分钟前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11114.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">小刘</h5>
                            <p class="bsa-media-text">订单已经发货完毕</p>
                            <p class="bsa-media-time small">7天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11126-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">小王</h5>
                            <p class="bsa-media-text">晚上一起去公园走走呀~</p>
                            <p class="bsa-media-time small">8天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11112-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">人生如茶</h5>
                            <p class="bsa-media-text">今天晚上大家留下来开个产品会议</p>
                            <p class="bsa-media-time small">2周前</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="bsa-dropdown-menu-footer d-flex align-items-center justify-content-center">
                <a href="javascript:" class="bsa-dropdown-view-all">查看所有消息</a>
            </div>
        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="bsa-user-info" data-bs-toggle="dropdown" role="button">
            <img src="static/images/avatar.jpg" class="bsa-user-img" alt="用户头像">
            <div class="bsa-user-detail">
                <div class="bsa-user-name">欲饮琵琶码上催</div>
                <div class="bsa-user-role">超级管理员</div>
            </div>
        </div>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-person"></i>个人资料</a></li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-gear"></i>设置</a></li>
            <li>
                <div class="dropdown-divider"></div>
            </li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-box-arrow-right"></i>退出登录</a></li>
        </ul>
    </div>
</div>


<!--内容区域-->
<div class="bsa-main-wrapper">
    <div class="bsa-main-content">
        <!-- 内容都应该写包裹在此-->
        <div class="container-fluid">
            <div class="row g-3 gy-4">
                <div class="col-xxl-3 col-xl-6">
                    <div class="card border-0 shadow-sm text-white bsa-bg-color4 bsa-radius-15">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center">
                                <div style="flex-shrink: 0">
                                    <h6 class="mb-1">今日收入</h6>
                                    <h4 class="mb-1">102,125.00</h4>
                                </div>
                                <div class="ms-auto fs-1" style="flex-shrink: 0">
                                    <i class="bi bi-currency-yen"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xxl-3 col-xl-6">
                    <div class="card border-0 shadow-sm text-white bsa-bg-color3 bsa-radius-15">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center">
                                <div style="flex-shrink: 0">
                                    <h6 class="mb-1">用户总数</h6>
                                    <h4 class="mb-1">1546</h4>
                                </div>
                                <div class="ms-auto fs-1" style="flex-shrink: 0">
                                    <i class="bi bi-people"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xxl-3 col-xl-6">
                    <div class="card border-0 shadow-sm text-white bsa-bg-color1 bsa-radius-15">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center">
                                <div style="flex-shrink: 0">
                                    <h6 class="mb-1">订单总数</h6>
                                    <h4 class="mb-1">2000</h4>
                                </div>
                                <div class="ms-auto fs-1" style="flex-shrink: 0">
                                    <i class="bi bi-cart"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xxl-3 col-xl-6">
                    <div class="card border-0 shadow-sm text-white bsa-bg-color2 bsa-radius-15">
                        <div class="card-body p-4">
                            <div class="d-flex align-items-center">
                                <div style="flex-shrink: 0">
                                    <h6 class="mb-1">留言</h6>
                                    <h4 class="mb-1">1000</h4>
                                </div>
                                <div class="ms-auto fs-1" style="flex-shrink: 0">
                                    <i class="bi bi-chat"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white">
                            近七天pv值
                        </div>
                        <div class="card-body">
                            <canvas id="chart-bar"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white">
                            年营业额走势
                        </div>
                        <div class="card-body">
                            <canvas id="chart-line"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card bsa-radius-10 border-0 shadow-sm">
                        <div class="card-header bg-white">
                            项目完成情况
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <p>项目A</p>
                                <div class="progress">
                                    <div class="progress-bar  progress-bar-striped progress-bar-animated bg-danger"
                                         style="width: 25%;">
                                        25%
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <p>项目B</p>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                                         style="width: 35%;">
                                        35%
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <p>项目C</p>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info"
                                         style="width: 45%;">
                                        45%
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <p>项目D</p>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                                         style="width: 55%;">
                                        55%
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <p>项目E</p>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
                                         style="width: 65%;">
                                        65%
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white">
                            订单摘要
                        </div>
                        <div class="card-body">

                            <div class="table-responsive">
                                <table class="table align-middle mb-0">
                                    <thead class="table-light">
                                    <tr>
                                        <th>订单号</th>
                                        <th>商品</th>
                                        <th>下单人</th>
                                        <th>下单日期</th>
                                        <th>价格</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>#157444499</td>
                                        <td>
                                            Apple iPhone 13 (A2634) 512GB
                                        </td>
                                        <td>欲饮琵琶码上催</td>
                                        <td>2022/7/16</td>
                                        <td>￥100.00</td>
                                        <td>
                                            <span class="badge bg-success">交易成功</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="javascript:" class="btn btn-sm btn-light"><i
                                                        class="bi bi-gear"></i></a>
                                                <a href="javascript:" class="btn btn-sm btn-light ms-4"><i
                                                        class="bi bi-arrow-down"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>#157444499</td>
                                        <td>
                                            Apple iPhone 13 (A2634) 512GB
                                        </td>
                                        <td>欲饮琵琶码上催</td>
                                        <td>2022/7/16</td>
                                        <td>￥100.00</td>
                                        <td>
                                            <span class="badge bg-success">交易成功</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="javascript:" class="btn btn-sm btn-light"><i
                                                        class="bi bi-gear"></i></a>
                                                <a href="javascript:" class="btn btn-sm btn-light ms-4"><i
                                                        class="bi bi-arrow-down"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>#157444499</td>
                                        <td>
                                            Apple iPhone 13 (A2634) 512GB
                                        </td>
                                        <td>欲饮琵琶码上催</td>
                                        <td>2022/7/16</td>
                                        <td>￥100.00</td>
                                        <td>
                                            <span class="badge bg-success">交易成功</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="javascript:" class="btn btn-sm btn-light"><i
                                                        class="bi bi-gear"></i></a>
                                                <a href="javascript:" class="btn btn-sm btn-light ms-4"><i
                                                        class="bi bi-arrow-down"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>#157444499</td>
                                        <td>
                                            Apple iPhone 13 (A2634) 512GB
                                        </td>
                                        <td>欲饮琵琶码上催</td>
                                        <td>2022/7/16</td>
                                        <td>￥100.00</td>
                                        <td>
                                            <span class="badge bg-success">交易成功</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="javascript:" class="btn btn-sm btn-light"><i
                                                        class="bi bi-gear"></i></a>
                                                <a href="javascript:" class="btn btn-sm btn-light ms-4"><i
                                                        class="bi bi-arrow-down"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>#157444499</td>
                                        <td>
                                            Apple iPhone 13 (A2634) 512GB
                                        </td>
                                        <td>欲饮琵琶码上催</td>
                                        <td>2022/7/16</td>
                                        <td>￥100.00</td>
                                        <td>
                                            <span class="badge bg-success">交易成功</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="javascript:" class="btn btn-sm btn-light"><i
                                                        class="bi bi-gear"></i></a>
                                                <a href="javascript:" class="btn btn-sm btn-light ms-4"><i
                                                        class="bi bi-arrow-down"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>#157444499</td>
                                        <td>
                                            Apple iPhone 13 (A2634) 512GB
                                        </td>
                                        <td>欲饮琵琶码上催</td>
                                        <td>2022/7/16</td>
                                        <td>￥100.00</td>
                                        <td>
                                            <span class="badge bg-success">交易成功</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <a href="javascript:" class="btn btn-sm btn-light"><i
                                                        class="bi bi-gear"></i></a>
                                                <a href="javascript:" class="btn btn-sm btn-light ms-4"><i
                                                        class="bi bi-arrow-down"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>



            </div>
        </div>
    </div>
</div>

<!--调色板-->
<div class="bsa-switcher">
    <div class="bsa-switcher-toggler-btn">
        <div class="bsa-switcher-toggler-icon">
            <i class="bi bi-gear"></i>
        </div>
    </div>
    <div class="bsa-switcher-header">
        <h5 class="bsa-switcher-header-title">自定义主题</h5>
        <button type="button" class="btn-close text-reset bsa-switcher-toggler-btn"></button>
    </div>
    <div class="bsa-switcher-body">
        <h6 class="text-dark">头部颜色</h6>
        <hr>
        <div class="bsa-headercolor-wrap">

            <div class="row row-cols-auto g-3">
                <div class="col">
                    <div class="headercolor1"></div>
                </div>
                <div class="col">
                    <div class="headercolor2"></div>
                </div>
                <div class="col">
                    <div class="headercolor3"></div>
                </div>
                <div class="col">
                    <div class="headercolor4"></div>
                </div>
                <div class="col">
                    <div class="headercolor5"></div>
                </div>
                <div class="col">
                    <div class="headercolor6"></div>
                </div>
                <div class="col">
                    <div class="headercolor7"></div>
                </div>
                <div class="col">
                    <div class="headercolor8"></div>
                </div>
            </div>
        </div>

        <h6 class="text-dark">侧边栏颜色</h6>
        <hr>
        <div class="bsa-sidebarcolor-wrap">

            <div class="row row-cols-auto g-3">
                <div class="col">
                    <div class="sidebarcolor1"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor2"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor3"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor4"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor5"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor6"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor7"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor8"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="static/js/bootstrap.bundle.min.js"></script>
<script src="src/bootstrap-admin.js"></script>
<script src="lib/chart.js/dist/chart.min.js"></script>

<script>
    new Chart(document.getElementById('chart-bar').getContext('2d'), {
        type: 'bar',
        data: {
            labels: ['2022/7/11', '2022/7/12', '2022/7/13', '2022/7/14', '2022/7/15', '2022/7/16'],
            datasets: [{
                label: 'pv值',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });


    new Chart(document.getElementById('chart-line').getContext('2d'), {
        type: 'line',
        data: {
            labels: ['2017', '2018', '2019', '2020', '2021', '2022'],
            datasets: [{
                label: '营业额 单位/万元',
                data: [65, 90, 60, 50, 40, 30, 20],
                fill: false,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

</body>
</html>